<template>
  <wrapper>
    <description :infos="infos" :notes="notes" @saveEdit="saveEdit">
      <div style="margin: 10px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="数据拷贝" name="first">
            <div style="display: flex; justify-content: flex-end; margin: 10px">
              <el-button size="mini" @click="setData">修改新数据</el-button>
              <el-button size="mini" @click="DataCopy('1')">浅拷贝</el-button>
              <el-button size="mini" @click="DataCopy('2')">深拷贝</el-button>
            </div>

            <p>原数据：{{ person }}</p>
            <p>拷贝结果：{{ newData }}</p>
          </el-tab-pane>
          <el-tab-pane label="echart使用" name="second">
            <my-chart ref="mychart" @getInfo="getInfo"></my-chart>
          </el-tab-pane>
          <el-tab-pane label="table使用" name="mytable">
            <my-table ref="mytable" @getInfo="getInfo"></my-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </description>
  </wrapper>
</template>
<script>
import MyChart from "../chartDemo/myChart.vue";
import MyTable from "./mytable/mytable.vue";
export default {
  name: "zqzb",
  components: { MyChart,MyTable },
  data() {
    return {
      curTab:"second",
      activeName: "second",
      infos: {},
      notes: '',
      input: "",
      radio: "",
      person: {
        uname: "张三",
        age: 22,
        sex: "男",
        arr: ["小明", "大大", "小小"],
        obj: {
          index: 1,
          name: "三和",
        },
        say: function () {
          console.log("hello javascript");
        },
      },
      newData: null,
    };
  },
  methods: {
    // 保存编辑
    saveEdit(desc){
      switch (this.curTab){
        case 'mytable':
          this.$refs.mychart.saveInfo(desc);
          break
        case 'second':
          this.$refs.mychart.saveInfo(desc);
          break
      }

    },
    getInfo(infos,notes) {
      this.infos = infos;
      this.notes = notes;
      console.log('getinfo',notes)
    },
    handleClick(tab) {
      this.curTab = tab.name
      if (tab.name === "first") {
        let infos = {
          title: "练习场", //功能标题
          desc: "区分浅拷贝和深拷贝", //功能描述
          methodDesc: ["后续加"], //实现原理
        };
        let notes = [
          "点击拷贝（浅拷贝，深拷贝），再点击“修改数据”，可看到浅拷贝和深拷贝的区别，浅拷贝修改新数据，原数据随着变化；深拷贝，修改新数据，原数据不变;",
          "使用深拷贝的方式：",
          "1 使用JSON.parse(JSON.stringify())  方式需要注意，具体百度",
        ];
        this.getInfo(infos, notes);
      } else if (tab.name === "second") {
        this.$refs.mychart.sendInfo();
      }else if(tab.name === "mytable"){
        this.$refs.mytable.sendInfo();
      }
    },
    DataCopy(type) {
      if (type === "1") {
        // 浅层拷贝
        this.newData = { ...this.person };
      } else {
        // 深层拷贝
        // JSON.stringify + JSON.parse
        this.newData = JSON.parse(JSON.stringify(this.person));
      }
    },
    setData() {
      this.newData.obj.name = "tttt";
    },
  },
};
</script>
<style scoped>
</style>